{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test6 全屏</title>

    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">
    <!-- 引入核心的js文件-->
    <script src="{% static "layui/layui.js" %}"></script>
    <script src="{% static "js/jquery-3.6.1.js" %}"></script>
    <script src="{% static "js/jquery-3.6.1.min.js" %}"></script>



    <style>
        #demo {
            width: 450px;
            height: 300px;
        }

        #fullScreenMask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            background-color: #ffffff;
        }


        #fullScreen {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

<div class="layui-fluid">
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="demo"  style="width:100%;height:300px;"></div>

    <!--全屏显示的容器-->
    <div id="fullScreenMask">
        <div id="fullScreen"></div>
    </div>

</div>
</body>
<script type="text/javascript">

    //全局定义一次, echarts  , 引入图表 js
    layui.config({
        base: "{%static '/layui/echarts5.3.3/' %}"  //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        echarts: 'echarts'
    });

    layui.use(['form', 'layer', 'table', "echarts", 'laytpl', 'laydate', 'carousel'], function () {
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            laytpl = layui.laytpl,
            table = layui.table,
            carousel = layui.carousel,
            laydate = layui.laydate;
        var echarts = layui.echarts;


        var chartZhu = echarts.init(document.getElementById('demo'));

        //声明一个 全屏显示的echarts图表
        var chartScreen = null;

        //指定图表配置项和数据
        var optionChart = {
            title: {
                text: '今日流量趋势',
                x: 'center',
                textStyle: {
                    fontSize: 14
                }
            },
            tooltip: {
                trigger: 'axis',

                show: true
            },
            toolbox: {// 工具栏
                itemSize: 16,
                showTitle: false,
                right: 24,
                feature: {
                    saveAsImage: {},
                    myTool: {//自定义工具 myTool
                        show: true,
                        title: '全屏显示',
                        icon: "path://M708.2 792.2l-97.5-97.7c-11.6-11.6-11.6-30.3 0-41.9l41.9-41.9c11.6-11.6 30.3-11.6 41.9 0l97.6 97.6 85.3-85.3c11.6-11.6 30.3-11.6 41.9-0.1 5.6 5.6 8.7 13.1 8.7 21v254.4c0 16.4-13.3 29.6-29.6 29.6H643.9c-16.4 0-29.6-13.3-29.6-29.6 0-7.8 3.1-15.4 8.6-20.9l85.3-85.3v0.1zM234 708.1l97.5-97.6c11.6-11.6 30.3-11.6 41.9 0l41.9 41.9c11.6 11.6 11.6 30.3 0 41.9l-97.6 97.6 85.3 85.3c11.6 11.6 11.5 30.4-0.1 41.9-5.6 5.5-13.1 8.6-20.9 8.6H127.7c-16.4 0-29.6-13.3-29.6-29.6V643.7c0-16.4 13.3-29.6 29.6-29.6 7.9 0 15.4 3.1 21 8.7l85.3 85.3zM792 318l-97.6 97.6c-11.6 11.6-30.3 11.6-41.9 0l-41.8-41.8c-11.6-11.6-11.6-30.3 0-41.9l97.6-97.6L623 149c-11.6-11.6-11.5-30.4 0.1-41.9 5.6-5.5 13.1-8.6 20.9-8.6h254.4c16.4 0 29.6 13.3 29.6 29.6v254.4c0 16.4-13.3 29.6-29.6 29.6-7.9 0-15.4-3.1-21-8.7L792 318z m-474.3-83.9l97.6 97.6c11.6 11.6 11.6 30.3 0 41.9l-42 42c-11.6 11.6-30.3 11.6-41.9 0L233.8 318l-85.3 85.3c-11.6 11.6-30.4 11.5-41.9-0.1-5.6-5.6-8.7-13.1-8.6-21V127.8c0-16.4 13.3-29.6 29.6-29.6H382c16.4 0 29.6 13.3 29.6 29.6 0 7.9-3.1 15.4-8.7 21l-85.2 85.3z",
                        //此处 图片路径前面必须加字符串  "image://"
                        onclick: function () {
                            //生成全屏显示的图表
                            if (setFullScreenToolBox(optionChart)) {
                                console.log(chartScreen)
                                getChartData(chartScreen);
                            }
                        }
                    }
                }
            },
            legend: {
                data: ['', '']
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                data: ['06:00', '06:30', '07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30', '23:00', '23:30']
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: 'PV',
                type: 'line',
                smooth: true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: [111, 222, 333, 444, 555, 666, 3333, 33333, 55555, 66666, 33333, 3333, 6666, 11888, 26666, 38888, 56666, 42222, 39999, 28888, 17777, 9666, 6555, 5555, 3333, 2222, 3111, 6999, 5888, 2777, 1666, 999, 888, 777]
            }, {
                name: 'UV',
                type: 'line',
                smooth: true,
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
                data: [11, 22, 33, 44, 55, 66, 333, 3333, 5555, 12666, 3333, 333, 666, 1188, 2666, 3888, 6666, 4222, 3999, 2888, 1777, 966, 655, 555, 333, 222, 311, 699, 588, 277, 166, 99, 88, 77]
            }]
        }
        chartZhu.setOption(optionChart, true);

        function getChartData(chart) {
            chart.setOption(optionChart, true);
            console.log("sssdfsd")


        }

        //全屏显示 toolbox回调
        //@param option   echarts的配置项
        function setFullScreenToolBox(optionChart) {
            if ($('#fullScreenMask').css('display') === 'block') {
                $('#fullScreenMask').hide();
                ChartScreen = null;
                return false;
            }

            $('#fullScreenMask').show();
            chartScreen = echarts.init(document.getElementById('fullScreen'));
            chartScreen.setOption(optionChart);
            chartScreen.setOption({
                toolbox: {
                    feature: {
                        myTool: {
                            title: '退出全屏',
                            icon: "path://M19.84,23.38H17.79a.5.5,0,0,0-.5.5v4a.5.5,0,0,0,.5.5H27.88a.5.5,0,0,0,.5-.5V17.79a.5.5,0,0,0-.5-.5h-4a.5.5,0,0,0-.5.5v2.05l-7-7a.48.48,0,0,0-.7,0l-2.83,2.83a.48.48,0,0,0,0,.7Z M15.67,51.16a.48.48,0,0,0,.7,0l7-7v2.05a.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5V36.12a.5.5,0,0,0-.5-.5H17.79a.5.5,0,0,0-.5.5v4a.5.5,0,0,0,.5.5h2.05l-7,7a.48.48,0,0,0,0,.7Z M36.12,28.38H46.21a.5.5,0,0,0,.5-.5v-4a.5.5,0,0,0-.5-.5H44.16l7-7a.48.48,0,0,0,0-.7l-2.83-2.83a.48.48,0,0,0-.7,0l-7,7V17.79a.5.5,0,0,0-.5-.5h-4a.5.5,0,0,0-.5.5V27.88A.5.5,0,0,0,36.12,28.38Z M36.12,46.71h4a.5.5,0,0,0,.5-.5V44.16l7,7a.48.48,0,0,0,.7,0l2.83-2.83a.48.48,0,0,0,0-.7l-7-7h2.05a.5.5,0,0,0,.5-.5v-4a.5.5,0,0,0-.5-.5H36.12a.5.5,0,0,0-.5.5V46.21A.5.5,0,0,0,36.12,46.71Z",
                        }
                    }
                }
            });
            return true;
        }


        window.addEventListener("resize", () => {
            if (!this.chartScreen) {
                return;
            }
            this.chartScreen.resize();
        });


    });
</script>
</html>
